<template>
  <el-card class="box-card">
    <template #header>
      <el-steps
          :space="200"
          :active="currentStep"
          simple
      >
        <el-step title="基础信息" :icon="Edit"  @click="currentStep=0"/>
        <el-step title="缴费" :icon="Money"  @click="currentStep=1"/>
        <el-step title="领取物品" :icon="CreditCard" @click="currentStep=2" />
        <el-step title="定位打卡" :icon="Place" @click="currentStep=3" />
      </el-steps>
    </template>
      <!-- 如果步骤条为0-----显示基础信息     -->
        <div  v-show="currentStep === 0">
          <!--    基本信息的表单项-->
          <el-form  ref="userDataRef"  :model="userData"  :rules="userRules"
                    label-width="120px" size="large">
            <el-form-item label="录取编号">
              <el-input v-model="userData.adsno" maxlength="13" show-word-limit disabled />
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="userData.sid" disabled/>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="userData.sname" disabled/>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userData.gender" disabled/>
            </el-form-item>
            <el-form-item label="院系">
              <el-input v-model="userData.dept" disabled :formatter="attributeFormatter"/>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userData.email" />
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="userData.phone" maxlength="11" show-word-limit/>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="userData.address"/>
            </el-form-item>
            <div class="form-bottom-btn">
              <el-button v-show="currentStep !== 0" @click="currentStep--">上一步</el-button>
              <el-button v-show="currentStep !== 4" @click="nextStep">下一步</el-button>
              <el-button type="primary" @click="handlerUser">保存</el-button>
            </div>
          </el-form>
        </div>
      <!-- 如果步骤条为1-----显示缴费信息     -->
        <div  v-show="currentStep === 1">
          <div style="margin:40px 20px 20px 20px;height: 330px">
            <el-table :data="paidInfo" stripe border style="width: 100%">
              <el-table-column prop="sno" label="学号" />
              <el-table-column prop="sname" label="姓名" />
              <el-table-column prop="merchat" label="收款方" width="200px"/>
              <el-table-column prop="payconn" label="缴费内容"/>
              <el-table-column prop="payno" label="订单号"/>
              <el-table-column prop="money" label="缴费金额"  />
              <el-table-column prop="paydt" label="缴费时间"  width="200px" />
              <el-table-column prop="status" label="缴费状态"  />
              <el-table-column label="操作" width="160">
                <template #default="scope">
                  <el-button
                      size="small"
                      type="primary"
                      :disabled="scope.row.status === '已缴费'"
                      @click="handlerPay(scope.$index, scope.row)">
                    去支付
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="form-bottom-btn">
            <el-button v-show="currentStep !== 0" @click="currentStep--">上一步</el-button>
            <el-button v-show="currentStep !== 4 && paidInfo.some(item => item.status == '已缴费')" @click="nextStep">下一步</el-button>
          </div>
        </div>
      <!-- 如果步骤条为2-----显示物品信息     -->
        <div  v-show="currentStep === 2">
          <div style="margin:40px 20px 20px 20px;height: 330px">
            <el-table :data="goodsInfo" stripe border style="width: 100%">
              <el-table-column prop="sid" label="学号" />
              <el-table-column prop="sname" label="姓名" />
              <el-table-column prop="gender" label="性别" />
              <el-table-column prop="cardid" label="卡号" />
              <el-table-column prop="detail" label="物品类型" />
              <el-table-column prop="receiveDt" label="领取时间"/>
              <el-table-column prop="receiveStatus" label="领取状态"  />
              <el-table-column label="操作" width="160">
                <template #default="scope">
                  <el-button
                      size="small"
                      type="primary"
                      :disabled="scope.row.receiveStatus ==='已领取'"
                      @click="handlerGoods(scope.$index, scope.row)">
                    领取
                  </el-button>
                  <el-button
                      size="small"
                      type="success"
                      @click="showDetails(scope.$index, scope.row)">
                    查看详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-dialog
                title="宿舍详情"
                v-model="dialogVisible"
                width="30%">
              <div>
                <p><strong>楼号:</strong> {{ dormitoryInfo.position }}</p>
                <p><strong>房间号:</strong> {{ dormitoryInfo. dorno}}</p>
                <p><strong>宿舍类型:</strong> {{ dormitoryInfo.type }}</p>
                <p><strong>宿舍属性:</strong> {{ dormitoryInfo.attri }}</p>
              </div>
              <template #footer>
        <span>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
              </template>
            </el-dialog>
          </div>
          <div class="form-bottom-btn">
            <el-button v-show="currentStep !== 0" @click="currentStep--">上一步</el-button>
            <el-button v-show="currentStep !== 4 && goodsInfo.some(item => item.receiveStatus == '已领取')" @click="nextStep">下一步</el-button>
          </div>
        </div>
      <!-- 如果步骤条为4-----显示相关引导信息     -->
        <div  v-show="currentStep === 3">
          <div id="container">
            <h1>请您去往<span>位置查找</span>完成位置打卡，打卡<span>教室</span>与<span>食堂</span>两个地点,完成报到！ </h1>
          </div>
        </div>
  </el-card>
</template>
<script setup>

import {Edit, Money, Place, CreditCard, Delete} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/freshman";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "../../../router";
onMounted(()=>{
  getDept();
  initUserInfo();
  getPay();
  getGoods();
})
//步骤条当前位置
const currentStep=ref(0)
//表单数据--新生的信息
const userData=reactive({
})
////校验表单数据
const userRules={
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^\d{6,11}$/, message: '电话号码必须为6到11位数字', trigger: 'blur' }
  ]
}

//表单数据---新生缴费的信息
const paidInfo=ref([])
//表单数据--物品信息
const goodsInfo=ref([])

//宿舍详情
const dialogVisible = ref(false);
const dormitoryInfo = ref({
});
const initUserInfo=()=>{
  const loginUser = sessionStorage.getItem("loginUser");
  if (loginUser) {
    const userobj = JSON.parse(loginUser)
    userData.adsno = userobj.adsno;
    userData.sid = userobj.sid;
  }
  request({
    url:'/fresh/get',
    method:'get',
    params:{
      adsno:userData.adsno
    }
  }).then(req=>{
  /*  console.log(req)
    console.log(req.data.data.sid)*/
    if (req.data.errorCode == 200){
      userData.adsno=req.data.data.adsno;
      userData.sid=req.data.data.sid;
      userData.sname=req.data.data.sname;
      userData.gender=req.data.data.gender;
      userData.email=req.data.data.email;
      userData.dept=req.data.data.dept;
      userData.address=req.data.data.address;
      userData.phone=req.data.data.phone;
    }
  })
}
//对应的值
const deptValue=ref([]);
const getDept=()=>{
  request({
    url:'/dept/all',
    method:'get'
  }).then((req)=>{
    console.log(req)
    if (200==req.data.errorCode){
      deptValue.value=req.data.data;
    }
  })
}
const attributeFormatter=(cellValue)=> {
  for (let i=0;i<deptValue.value.length;i++){
    if (cellValue== deptValue.value[i].deptid){
      return deptValue.value[i].deptname
    }
  }
}
//获取缴费信息
const getPay=()=>{
  request({
    url:'/pay/get',
    method:'get',
    params:{
      sno:userData.sid
    }
  }).then(req=>{
    if (req.data.errorCode == 200){
      paidInfo.value=req.data.data;
    }
  })
}
//获取物品信息
const getGoods=()=>{
  request({
    url:'/goods/get',
    method:'get',
    params:{
      sid:userData.sid
    }
  }).then(req=>{
    if (req.data.errorCode == 200){
      goodsInfo.value=req.data.data;
    }
  })
}
//每步
const nextStep=()=>{
  currentStep.value++;
}

//基本信息保存 按钮
const userDataRef=ref(null)
const handlerUser=()=>{
  userDataRef.value.validate((valid) => {
    if (valid) {
      // 表单校验通过，处理提交逻辑
     request({
       url:'/fresh/update',
       method: 'put',
       data: JSON.stringify(userData),
       headers: {'content-type': "application/json;charset=UTF-8"}
     }).then(res=>{
       if (res.data.errorCode== 200){
         ElMessage.success('您的信息已更新！');
       }else{
         ElMessage.error('更新失败：' + res.data.msg);
       }
     }).catch(error => {
       console.error('请求失败:', error);
       ElMessage.error('请求失败');
     });
    } else {
      // 表单校验失败
      ElMessage.error('表单校验失败');
      return false;
    }
  });
}
//缴费保存 按钮
const handlerPay=(index,row)=>{
  window.open(`http://localhost:8083/alipay/pay?sno=${row.sno}`);
}
//领取物品保存 按钮
const handlerGoods=()=>{
  request({
    url:'/goods/update',
    method:'get',
    params:{
      sid:userData.sid
    }
  }).then(res=>{
    if (res.data.errorCode == 200){
      ElMessage.success('您的信息已更新！');
      getGoods();
    }
  })
}

//查看详情
const showDetails=(index,row)=>{
  dialogVisible.value=true;
  request({
    url:'/dormitory/get',
    method:'get',
    params:{
      id:row.dorid
    }
  }).then(req=>{
    if (req.data.errorCode == 200){
      dormitoryInfo.value=req.data.data;
    }
  })
}

</script>
<style scoped>
.text{
  font-size:14px;
}
.item{
  margin-bottom: 18px;
}
.box-card{
  width:100%;
  margin-top: 40px;
}
.el-step{
  cursor: pointer;
}
.form-bottom-btn{
 display: flex;
  justify-content: center;
  align-items: center;
}
.el-form{
  padding: 0 200px 0 80px;
}
#container span{
  color: coral;
}
</style>